<template>
  <!-- 关于友链模块 -->
  <div class="personblog clearfix">
    <div class="w">
      <!-- 主体左边 -->
      <div class="person-content">
        <div class="person-message">
          <h2 class="person-title">您当前的位置是：关于友链 ></h2>
          <div class="person-aobut">关于友情链接:</div>
          <div class="person-pay clearfix">
            <h3>申请诸葛大原博客网站的友友们注意啦！：</h3>
            <p>申请步骤如下：</p>
            <p>1、首先友友们也要有我的博客网站哦</p>
            <p>2、要在Blog留言中留下贵站的名称、网站url等。</p>
            <p>
              3、申请诸葛大原博客网站的友情链接不得包含敏感信息和词汇，内容必须绿色健康，遵守网络环境，符合本站友情链接要求的网站，即可由管理员操作添加贵站的友情链接，并显示在页面上。
            </p>
            <p>
              4、本友情链接的博主会定时更新，那些优秀的博客链接我一直会保留在页面上，便于他人访问与学习。
            </p>
            <p>
              5、如果你是无意间走进本站的，或许有什么文字吸引到你，无论怎样，来者是客，博主热烈欢迎你。
            </p>
            <p>【注意】请认真阅读申请友链要求🙂</p>
          </div>
          <div class="person-yqlj">友情链接：</div>
          <div class="person-friendship">
            <ul>
              <li v-for="(item,index) in linkInfo" :key="item._id">
                <a :href="item.home" target="_blank">
                  <div class="friend-one">
                    <img :src="item.logo" alt="" />
                  </div>
                </a>
                  <p class="friend-name">
                    <a :href="item.home" target="_blank">{{item.name}}</a>
                  </p>
                  <p class="friend-describe">{{item.describe}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 主体右边 -->
      <div class="person-hot">
        <HotLabels></HotLabels>
      </div>
    </div>
  </div>
</template>

<script>
// 引入子组件
import HotLabels from "../components/HotLabels.vue";

export default {
  name: "PersonBlog",
  components: {
    HotLabels,
  },
  data(){
    return{
      linkInfo:[],
    }
  },
  methods:{
    async getLinkData(){
       let {data} =  await this.$axios({
            method:"GET",
            url:"getData/link",
          });
          // console.log(data);
          this.linkInfo = data.data;
    },
  },
  created(){
    this.getLinkData();
  }

};
</script>

<style lang="less" scoped>
.personblog {
  margin-top: 70px;
  
}
// 主体左边
.person-content {
  margin-right: 305px;
}
.person-content .person-message {
  float: left;
  width: 100%;
  // height: 1500px;
  margin-bottom: 20px;
  background-color: #fff;

}
.person-message .person-title {
  padding: 6px 20px;
  color: #1b1a1a;
  font-size: 16px;
  background-color: #f7f7f7;
  cursor: text;
  border-bottom: 4px solid #f71f1f;
}
.person-message .person-aobut {
  font-size: 24px;
  font-weight: 400;
  padding: 20px 0 10px 0;
  color: #58C50D;
  margin-bottom: 10px;
}
.person-message .person-pay {
  line-height: 40px;
  font-size: 16px;
  text-indent: 2em;
}
.person-message .person-yqlj{
  font-size: 24px;
  font-weight: 700;
  color: #87CEEB;
  margin-top: 20px;
  padding:15px 0;
  // box-sizing: border-box;
  background-color: #EEEBEB;
}
.person-message .person-friendship {
  width: 100%;
  // height: 300px;
  padding-top: 0px;
  background-color: #EEEBEB;
}
.person-friendship ul{
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.person-friendship ul li{
  float: left;
  width: 49%;
  background-color:#FFFBF0;
  padding: 15px 10px 10px 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  word-wrap: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}
.person-friendship ul li:hover{
  background-color: #fff;
}
.person-friendship ul li a{
  display: block;
}
.person-friendship ul li a{
  color: #44BB06;
}
.person-friendship .friend-name{
  font-size: 16px;
  margin-bottom: 10px;
}
.person-friendship .friend-name a:hover{
  color: blue;
  text-decoration: underline;
}
.person-friendship .friend-one{
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.person-friendship .friend-describe{
  margin-left: 120px;
  // height: 60px;
  overflow: hidden;
  // white-space:nowrap;
  text-overflow: ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3; 

}

.friend-one img{
  width: 100px;
  height: 100px;
}
// 主体右边
.person-hot {
  float: right;
  width: 290px;
}
</style>